/* Dice roller styles */
@keyframes shakeDice {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(-5px);
  }

  20% {
    transform: translateX(5px);
  }

  30% {
    transform: translateX(-5px);
  }

  40% {
    transform: translateX(5px);
  }

  50% {
    transform: translateX(-5px);
  }

  60% {
    transform: translateX(5px);
  }

  70% {
    transform: translateX(-5px);
  }

  80% {
    transform: translateX(5px);
  }

  90% {
    transform: translateX(-5px);
  }

  100% {
    transform: translateX(0);
  }
}

.dice-roller.roll-animation {
  animation: shakeDice 0.5s ease-in-out;
}
